<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<link rel="stylesheet" type="text/css" href="./source/tab.css">
</head>
<body>
	<div class="tab" id="app">
	  	<div class="tab-header">
	    	<div class="tab-item" 
	    		v-for="(item,index) in tabList" 
	    		:class="{'tab-active':current===index}" 
	    		@click="tabSwitch(index)">{{ item.title + index }}
	    	</div>
	  	</div>
	  	<div class="tab-content">
	    	<div :style="{display:current===index?'block' : 'none'}" v-for="item,index of tabList" >
	    		<p v-for="item,index of item.list">{{item.subTitle}}</p>
	    	</div>
	  	</div>
	</div>
</body>
</html>
<script src="../../../2.1.8/vue.js"></script>
<script>
	let tabList = [{
			title: '标签一',
			list: [{
			        subTitle: 'css课程'
			      },{
			        subTitle: 'css课程'
			      },{
			        subTitle: 'css课程'
			      }]
			},{
			    title: '标签二',
			    list: [{
			        subTitle: 'js课程'
			    }]
			},{
			    title: '标签三',
			    list: [{
			        subTitle: 'Vue课程'
			    }]
			}];
	let vm = new Vue({
		el : '#app',
		data : {
			tabList,
			current : 0,
		},
		methods : {
			tabSwitch( index){
				this.current = index;
			}
		}
	});
</script>